<template>
  <div ww3 auto>
    <div class="feed-btn" flex>
      <el-button type="primary" @click="goRecharge"> 充值 </el-button>
    </div>
    <div
      cur
      fz-24
      style="color: var(--green); text-align: right"
      @click="change"
    >
      发票中心
    </div>

    <el-card class="box-card">
      <div class="sale-table" auto="">
        <el-table
          :data="list"
          style="width: 100%"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <!--          <el-table-column
              type="selection"
              width="55">
          </el-table-column>-->

          <el-table-column prop="orderNumber" label="订单编号" width="300px">
          </el-table-column>

          <el-table-column prop="total" label="充值金额">
          </el-table-column>

          <el-table-column prop="body" label="支付方式">
          </el-table-column>

          <el-table-column prop="createTime" label="发布时间">
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <div flex ww1 style="justify-content: center">
       <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="currentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import $http from "@/api/recharge/recharge"
export default {
  name: "OrderInvoice",
  data() {
    return {
      tableData: [
        {
          date: "100",
          name: "https://pic.vjshi.com/2021-01-27/0438e08167daaf27ab262ce1f61393ef/online/main.jpg?x-oss-process=style/resize_w_285",
          province: "炫酷",
          city: "3000",
          address: "45",
          zip: 203,
          date2: "2021-11-01",
          per: "黄千惠",
          card: "450***********23",
          satus: 1,
        },
      ],
      pageSize: 10,
      pageNum: 1,
      total: 1,
      list: []
    };
  },
  mounted() {
    this.rechargeRecordList();
  },

  methods: {
     /**
     * 分页
     */
    currentChange(val) {
      this.pageNum = val;
      this.rechargeRecordList();
    },
    /**
     * 获取充值记录
     */
    rechargeRecordList() {
      let data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        userId: sessionStorage.getItem("userId")
      }
      $http.rechargeRecordList(data).then(res => {
        this.list = res.rows;
        this.total = res.total;
      })
    },
    change() {
      this.$router.push({
        name: "VatRecord",
      });
    },
    goRecharge() {
      this.$router.push('/account/recharge')
    }
  },
};
</script>

<style scoped>
.sale-table {
  width: 90%;
}
.box-card {
  margin: 2% auto;
}
</style>
